透過使用 TypeScript 的 Utility Types,可以更靈活地操控型別,特別是在處理複雜的資料結構時。
接下來的這幾天,我們要來介紹 TypeScript Utility Types。TypeScript 提供的這些工具類型可以幫助我們更高效地開發和維護程式碼。今天先來介紹其中最經典的三種 utility,那就是 Record
、Pick
、Omit
,這些是常用來改造物件型別的工具,使用得當可以大大提升程式碼的可讀性與擴展性。
Record
是用來將一組鍵對應到一組值的工具,適合用於當我們需要動態創建物件,且物件的鍵和值都要有明確的型別時。我們可以用它來定義某些動態的資料結構,確保物件的鍵和值都符合預期的型別。
例如,我們要保存餐廳的評價,可以使用 Record
將餐廳的 id
對應到它的 rating
:
type RestaurantRatings = Record<number, number>
const ratings: RestaurantRatings = {
1: 4.5,
2: 3.8,
3: 5.0
}
你也可以用 Record
來儲存餐廳的營業狀態:
type RestaurantStatus = Record<string, boolean>
const status: RestaurantStatus = {
"RestaurantA": true, // 開放營業
"RestaurantB": false // 關閉中
}
介紹完 Record
後,我們來看看另一個常用的工具型別——Pick
,它讓我們從現有的型別中挑選出部分屬性。這可以幫助我們只選取需要的部分屬性。
假設現在有一個型別定義如下:
type Restaurant = {
id: number
name: string
address: string
phone: string
rating: number
image: string
description: string
}
若在某些情形下,我們只需要 name
以及 image
屬性,那麼就可以使用 Pick
來挑選:
type Restaurant = {
id: number
name: string
address: string
phone: string
rating: number
image: string
description: string
}
// 只需要餐廳的名稱和圖片作為預覽展示,不需要其他詳細資訊
type RestaurantPreview = Pick<Restaurant, 'name' | 'image'>
Omit
與 Pick
相反,用來排除某些屬性。它與 Pick
的應用取決於你的需求,若今天你並不想讓用戶看見餐廳的 id
,那麼你就可以使用 Omit
來排除 id
:
type Restaurant = {
id: number
name: string
address: string
phone: string
rating: number
image: string
description: string
}
type RestaurantForClient = Omit<Restaurant, 'id'>
透過這三種常見的 Utility Types,我們可以輕鬆地操控和改造型別。明天我們將繼續探索更多有用的 TypeScript 工具型別。